<nav class="main">
  {% if navigation != null %}

  {% if navigation.header != null %}
  <span class="header">{{ navigation.header }}</span>
  {% endif %}

  <!-- Group of menu items -->
  <ol>
    {% for item in navigation.items %}
    {% if item.tag != null or item.items != null %}
    <div class="link-group">
      <span class="title">{{ item.title }}</span>

      {% if item.tag != null %}
      <ol>
        {% for page in pages.byTag(item.tag, sortBy=item.sortBy) %}
        <li><a href="/{{ page.data.url }}">{{ page.data.title }}</a></li>
        {% endfor %}
      </ol>
      {% endif %}

      {% if item.items != null %}
      <ol>
        {% for subItem in item.items %}
        <li><a href="/{{ subItem.url }}">{{ subItem.title }}</a></li>
        {% endfor %}
      </ol>
      {% endif %}
    </div>

    {% endif %}
    {% endfor %}
  </ol>

  {% if navigation.show_contributors %}
  {% set contributors = github[package.github.organization][package.github.name] %}
  <div class="contributors">
    <span class="title">Contributors <span class="count">({{ contributors | length }})</span></span>
    <ol>
      {% for contributor in (contributors|take(4)) %}
      <li class="contributor">
        <!-- Note: We show the contributor photo as a background image because -->
        <!--       displaying it as an <img> results in a few extra pixels above -->
        <!--       the image that we couldn't get rid of -->
        <a href="{{ contributor.userUrl }}" target="_blank" title="{{ contributor.userId }}" style="background-image: url('{{ contributor.avatarUrl }}');">
        </a>
      </li>
      {% endfor %}

      {% if contributors|length > 4 %}
      <li class="remaining-count">
        <div class="bubble">
          <span class="count">+{{ contributors|length - 4 }}</span>
        </div>
      </li>
      {% endif %}
    </ol>
  </div>
  {% endif %}

  {% endif %}
</nav>